<template>
  <div class="dust-page">
    <ScaleScreen
      :width="1920"
      :height="1080"
      class="scale-wrap"
      :selfAdaption="isScale"
    >
      <div class="bg">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else class="host-body">
          <!-- 头部 -->
          <dustHeader></dustHeader>
          <div class="contents">
            <!-- 左侧 -->
            <div class="content-left">
              <!-- 企业数量 -->
              <div
                class="content-left_number mb-20 number-bg-1 display-flex fd-column jc-center"
              >
                <div class="center-icon display-flex fd-column ai-center">
                  <span style="color: #1b85f7; font-size: 36px">{{
                    countEnterprise
                  }}</span>
                  <span>企业数量</span>
                </div>
              </div>
              <title-decoration-2
                class="content-left_top mb-20"
                :title="titleForm[queryName]"
              >
                <leftTop v-if="queryName === '涉爆粉尘'" />
                <leftTopGas v-else-if="queryName === '可燃气体'" />
                <leftTopDanger v-else-if="queryName === '抗爆柜'" />
              </title-decoration-2>
              <!-- 设备运行情况 -->
              <title-decoration-2
                class="content-left_middle mb-20"
                title="设备运行情况"
              >
                <leftMiddle />
              </title-decoration-2>
              <!-- 设备实时监测 -->
              <title-decoration-2
                class="content-left_bottom"
                title="设备实时监测"
              >
                <leftBottom />
              </title-decoration-2>
            </div>
            <!-- 中间内容 -->
            <div class="contetn_center">
              <!-- 数量统计 -->
              <div
                class="contetn_center-top mb-20 display-flex jc-space-around ai-flex-end"
              >
                <div
                  class="number-bg-2 display-flex fd-row ai-center jc-center"
                >
                  <img
                    src="@/assets/images/dust/number_gateways.png"
                    style="width: 50px; height: 50px"
                    alt=""
                  />
                  <div
                    class="center-icon ml-10 display-flex fd-column ai-center"
                  >
                    <span style="color: #41e4ff; font-size: 32px">{{
                      deviceCount.countGateWay
                    }}</span>
                    <span>网关数量</span>
                  </div>
                </div>
                <div
                  class="number-bg-2 display-flex fd-row ai-center jc-center"
                >
                  <img
                    src="@/assets/images/dust/number_sensor.png"
                    style="width: 50px; height: 50px"
                    alt=""
                  />
                  <div
                    class="center-icon ml-10 display-flex fd-column ai-center"
                  >
                    <span style="color: #00f59b; font-size: 32px">{{
                      deviceCount.countSensor
                    }}</span>
                    <span>传感器数量</span>
                  </div>
                </div>
                <div
                  class="number-bg-2 display-flex fd-row ai-center jc-center"
                >
                  <img
                    src="@/assets/images/dust/number_camera.png"
                    style="width: 50px; height: 50px"
                    alt=""
                  />
                  <div
                    class="center-icon ml-10 display-flex fd-column ai-center"
                  >
                    <span style="color: #e92728; font-size: 32px">{{
                      deviceCount.countCamera
                    }}</span>
                    <span>摄像头数量</span>
                  </div>
                </div>
              </div>
              <!-- 地图map -->
              <div class="contetn_center_bottom">
                <locationMap />
              </div>
            </div>
            <!-- 右侧 -->
            <div class="content-right">
              <!-- 预警率 -->
              <!-- <div class="content-right_number mb-20 number-bg-1 display-flex fd-column jc-center">
              <div class="center-icon display-flex fd-column ai-center">
                <span style="color:#8F64FF; font-size: 36px;">72.69%</span>
                <span>预警率</span>
              </div>
            </div> -->
              <!-- 区域分布 -->
              <title-decoration-2
                class="content-right_top mb-20"
                title="区域分布"
              >
                <rightTop></rightTop>
              </title-decoration-2>
              <!-- 企业列表 -->
              <title-decoration-2
                class="content-right_bottom mb-20"
                title="企业列表"
              >
                <template #button>
                  <el-button
                    type="text"
                    @click="$router.push({ path: '/operation/index' })"
                    >更多</el-button
                  >
                </template>
                <rightBottom />
              </title-decoration-2>
            </div>
          </div>
        </div>
      </div>
    </ScaleScreen>
  </div>
</template>
<script>
import dustHeader from "./dust-header.vue";

import leftTop from "./left-top.vue";
import leftTopGas from "./left-top-gas.vue";
import leftTopDanger from "./left-top-danger.vue";

import leftMiddle from "./left-middle.vue";
import leftBottom from "./left-bottom.vue";
import rightTop from "./right-top.vue";
import rightBottom from "./right-bottom.vue";
import locationMap from "./location-map.vue";
export default {
  name: "dust-page",
  components: {
    dustHeader,
    leftTop,
    leftTopGas,
    leftTopDanger,
    leftMiddle,
    leftBottom,
    locationMap,
    rightTop,
    rightBottom,
  },
  data() {
    return {
      isScale: true, // 是否进行全局适配
      loading: true,
      isFullScreen: true, // 是否全屏
      operationOptions: {}, // 设备运行情况
      monitoringOptions: {}, // 设备实时监测
      countEnterprise: 0, // 企业数量
      deviceCount: {
        countCamera: 0, // 摄像头数
        countGateWay: 0, // 网关数
        countSensor: 0, // 传感器数
      },
    };
  },
  filters: {},
  computed: {
    queryId() {
      return this.$route.query.id;
    },
    queryName() {
      return this.$route.query.name;
    },
    titleForm() {
      return {
        涉爆粉尘: "除尘器类型占比",
        抗爆柜: "抗爆柜类型统计",
        可燃气体: "气体监测种类统计",
      };
    },
  },
  watch: {},
  beforeCreate() {},
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.loading = false;
      // 数量统计
      this.getCount();
    },
    // 数量统计
    async getCount() {
      const countEnterprise = 18;
      this.countEnterprise = countEnterprise;
      const deviceCount = {
        countGateWay: 25,
        countSensor: 136,
        countCamera: 3,
      };
      this.deviceCount = deviceCount;
    },
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style lang="scss" scoped>
.dust-page {
  width: 100%;
  height: 100%;
  background: #010712;
  .scale-wrap {
    color: #d3d6dd;
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    background: url("~@/assets/images/dust/bg.png");
    background-position: left top, right bottom, left top;
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-size: cover;

    .bg {
      width: 100%;
      height: 100%;
      // padding: 16px 16px 10px 16px;
      box-sizing: border-box;
      .host-body {
        // 内容
        .contents {
          width: 100%;
          display: flex;
          height: 950px;
          justify-content: space-evenly;
          .content-left,
          .content-right {
            width: 460px;
            box-sizing: border-box;
          }
          // 数量背景1
          .number-bg-1 {
            width: 100%;
            background: url("~@/assets/images/dust/number_bg_1.png");
            background-position: left top, right bottom, left top;
            background-repeat: no-repeat, no-repeat, repeat-x;
            background-size: contain;
          }
          // 数量背景2
          .number-bg-2 {
            width: 30%;
            height: 75px;
            background: url("~@/assets/images/dust/number-bg-2.png");
            background-position: left top, right bottom, left top;
            background-repeat: no-repeat, no-repeat, repeat-x;
            background-size: contain;
          }
          // 左侧
          .content-left_number {
            height: 110px;
          }
          .content-left_top {
            height: 260px;
          }
          .content-left_middle {
            height: 260px;
          }
          .content-left_bottom {
            height: 260px;
          }
          // 中间
          .contetn_center {
            width: 920px;
            .contetn_center-top {
              height: 110px;
            }
            .contetn_center_bottom {
              height: 820px;
            }
          }
          // 右侧
          .content-right_number {
            height: 110px;
            // border:1px solid red
          }
          .content-right_top {
            height: 370px;
          }
          .content-right_bottom {
            height: 540px;
          }
        }
      }
    }
  }
}
</style>
